<template>
	<view class="shop">
		<view class="shop-for" v-for="(item,key) in list" :key="key" @click="getnav('/pages/productDetails/productDetails',item.id)">
			<image :src="item.img" mode="aspectFill"></image>
			<view class="shop-for-title">
				{{item.name}}
			</view>
			<view class="shop-for-price">
				<view class="shop-for-price-left">
					<text class="shop-for-price-left-t1">{{item.price}}</text>
					<text class="shop-for-price-left-t2">元/{{item.day}}天</text>
				</view>
				<view class="shop-for-price-right">
					<button class="shop-for-price-right-but">立即租用</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "shop",
		data() {
			return {

			};
		},
		props:{
			list:{
				type:Array,
				default:()=>{
					return [1,2,3,4,5,6,4,4,4,4,4,4,4,4]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shop {
		display: flex;
		flex-wrap: wrap;
		.shop-for {
			background-color: #fff;
			width: 330rpx;
			min-height: 430rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 26rpx;
			margin-bottom: 20rpx;
			image {
				width: 330rpx;
				height: 250rpx;
				// background-color: aqua;
			}

			.shop-for-title {
				margin: 20rpx 16rpx;
				font-size: 28rpx;
				color: #333333;
				height: 70rpx;
				text-overflow: ellipsis;
				display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
				-webkit-line-clamp: 2; // 将对象作为弹性伸缩盒子模型显示。
				-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
				overflow: hidden;
			}
			.shop-for-price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 16rpx;
				.shop-for-price-left{
					.shop-for-price-left-t1{
						color: #F23D0E;
						font-size: 28rpx;
						font-weight: bold;
					}
					.shop-for-price-left-t2{
						color: #666666;
						font-size: 22rpx;
					}
				}
				.shop-for-price-right{
					.shop-for-price-right-but{
						background-color: #F7BC1C;
						color: #333333;
						font-size: 22rpx;
						border-radius: 50rpx;
						width: 150rpx;
						height: 52rpx;
						line-height: 52rpx;
					}
				}
			}
		}
		.shop-for:nth-child(2n){
			margin-right: 0 !important;
		}
	}
</style>
